import React  from 'react';
import ReactDOM from 'react-dom';


  class ParentsCom extends React.Component{
    constructor(props){
      super(props)
      console.log(props);
      this.state=({
        arr:[1,2,3]
      })
     
    }
    render(){
      console.log(this.props)
      return(
       
        <div>
          <h1>组件插槽</h1>
          {this.props.children}
          < ChildCom>
            <h1 data-position='header'>这是放置到头部的内容</h1>
            <h2  data-position='main'>放置到主要的内容</h2>
            <h1  data-position='footer'> 放置到尾部的内容</h1>
          </ChildCom>
        </div>
      )
    }
  }


  class RootCom extends React.Component{
    constructor(props){
      super(props)
      console.log(props);
      this.state=({
        arr:[1,2,3]
      })
    }
    render(){
      return(
        <ParentsCom >
        <h2  data-name='a' data-index={this.state.arr[0]}>子组件1</h2>
        <h2  data-name='n'data-index={this.state.arr[1]} >子组件2</h2>
        <h2  data-name='c'data-index={this.state.arr[2]} >子组件3</h2>
      </ParentsCom>
      )
    }
  }
  class ChildCom extends React.Component{
    render(){
      let headerCom,mianCom,footerCom;
     
      this.props.children.forEach((item,index)=>{
       if (item.props['data-position']=='header') {
          headerCom = item
       }else if(item.props['data-position']=='main'){
          mianCom = item
       }  else{
        footerCom = item
       }
      })
      return(
        <div>
          <div className='header'>
            {headerCom}
          </div>
          <div className='main'>
            {mianCom}
          </div>
          <div className="footer">
            {footerCom}
          </div>
        </div>
      )
    }
  }



ReactDOM.render(
  <RootCom>
 
  </RootCom>,
  document.querySelector('#root')
);

